<template>
  <el-breadcrumb class="v-breadcrumb" :style="style"
                 separator="/">
    <!--在实现列表过渡时，如果需要过渡的元素是通过v-for渲染出来的，不能使用
        transition 包裹，需要使用 transition-group -->

    <!--若需要为 v-for 循环创建的元素设置动画，必须为每一个元素设置 :key 属性-->
    <transition-group name="breadcrumb">
      <el-breadcrumb-item v-for="(item,index)  in levelList"
                          :key="item.path"
                          v-if="item.meta.title">
        <span v-if="item.redirect==='redirect'||index==levelList.length-1"
              class="no-redirect">{{item.meta.title}}</span>
        <router-link v-else
                     :to="item.redirect||item.path">{{item.meta.title}}
        </router-link>
      </el-breadcrumb-item>
    </transition-group>
  </el-breadcrumb>
</template>
<script>
  import view from './view.js'

  export default {
    name: 'v-breadcrumb',
    componentName: 'v-breadcrumb',
    mixins: [view],
    props: {
      desc: {
        type: String,
        default: 'v-breadcrumb'
      }
    },
    created () {
      this.getBreadcrumb()
    },
    data () {
      return {
        levelList: null
      }
    },
    install: function (Vue) {
      Vue.component('v-breadcrumb', this)

    },
    watch: {
      $route () {
        this.getBreadcrumb()
      }
    },
    computed: {
      style () {
        let prop = view.getStyle(this.$props)
        console.log(prop)
        return prop
      }
    },
    methods: {
      getBreadcrumb () {
        this.levelList = this.$route.matched.filter(item => item.name)
      }
    }
  }

</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  .v-breadcrumb.el-breadcrumb {
    display: inline-block;
    font-size: 14px;
    line-height: 50px;
    margin-left: 10px;

    .no-redirect {
      color: #97a8be;
      cursor: text;
    }
  }
</style>

